import myComponent from "./myComponent";
import './ubutton.css';

const ButtonCounter = {
    name: "button-counter",
    props:["count"],
    methods:{
        onClick(){
            this.$emit('change',this.count+1);
        }
    },
    render(){
        return (
            <button onClick={this.onClick}>数量{this.count}+</button>
        );
    }
}

export default {
    name: "HelloCount",
    components:{
        myComponent
    },
    data(){
        return {
            text:'hello 固定内容',
            inputText:'搜而发',
            count:0
        }
    },
    props:{
        msg:String,
        attrObj:Object
    },
    watch:{},
    methods:{
        onChange(val){
            this.count = val;
            console.log(this.count);
        }
    },
    render(){
        const colorRed = {color:'red'};
        const placeholder = "我是placeholder";
        const attrObj1 = {
            name:'attr',class:'text-div',style:'display:flex;'
        }
        return (
            <div {...this.$attrs}>{/*结构接收未定义props参数注释代码*/}
                <h3 class="colorRed">内容</h3>
                <p style={colorRed}>{this.text}</p>
                <p style={this.count>5?'background:red;':''}>hello {this.msg}</p>
                <input style={{color:'#A3f1f2'}} v-model={this.count}/>
                <my-component/>
                <ButtonCounter
                    style={{marginTop:'10px'}}
                    count={this.count}
                    type="button"
                    onChange={this.onChange}
                    />
                <input placeholder="我是placeholder"/>
                <input placeholder={placeholder}/>
                <div {...this.attrObj}>11111<div>dfasdfasdf</div></div>
                <div {...attrObj1}>2222<div>dfasdfasdf</div></div>
            </div>
        )
    }
}
